<template>
    <div>
        <div style="float: left;display: flex;margin-bottom: 10px;">
            <el-input
                @clear="SystemLog_input"
                clearable
                prefix-icon="el-icon-search"
                placeholder="请输入登录名称"
                v-model="SystemLogPage.loginName"
                @keydown.enter.native="initSystemLogListQuery">
            </el-input>
            <el-input
                @clear="SystemLog_input"
                clearable
                style="margin-left: 8px;"
                prefix-icon="el-icon-search"
                placeholder="请输入人员名称"
                v-model="SystemLogPage.realName"
                @keydown.enter.native="initSystemLogListQuery">
            </el-input>
            <el-input
                @clear="SystemLog_input"
                clearable
                style="margin-left: 8px;"
                prefix-icon="el-icon-search"
                placeholder="请输入登录地址"
                v-model="SystemLogPage.loginAddress"
                @keydown.enter.native="initSystemLogListQuery">
            </el-input>
            <el-select style="margin-left: 8px;width:50%" v-model="SystemLogPage.loginStatus" @clear="SystemLog_input" clearable placeholder="请选择">
                <el-option
                v-for="item in loginStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <el-button style="margin-left: 8px;" icon="el-icon-search" type="info" @click="initSystemLogListQuery">查询</el-button>
            <el-button
                type="primary"
                @click="resetCondition"><i class="el-icon-remove"></i><span>重置</span>
            </el-button>
        </div>
        <!-- 下 -->
        <div class="pageList">
            <el-table
                :data="SystemLogList"
                stripe
                border
                style="width: 100%"
                v-loading="loading"
                element-loading-text="正在加载..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                @selection-change="handleSelectionChange">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
                <el-table-column
                        label="登录账号"
                        width="150">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>登录编号: {{ scope.row.loginId }}</p>
                            <p>登录账号: {{ scope.row.loginName }}</p>
                            <p>登录地址: {{ scope.row.loginAddress }}</p>
                            <p>属地信息: {{ scope.row.loginAffiliation }}</p>
                            <p>账号所属: {{ scope.row.realName }}</p>
                            <p>运营商信息: {{ scope.row.loginPlace }}</p>
                            <p>浏览器版本: {{ scope.row.loginBrowser }}</p>
                            <p>客户端系统: {{ scope.row.loginSystem }}</p>
                            <p>登录信息: {{ scope.row.loginInfo }}</p>
                            <p>登录时间: {{scope.row.loginTime| dateFormat('YYYY-MM-DD HH:mm:ss')}}</p>
                            <p>登录状态:
                                <el-tag type="success" v-if="scope.row.loginStatus==1">成功</el-tag>
                                <el-tag type="danger" v-else>失败</el-tag>
                            </p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.loginName }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        label="属地信息"
                        width="150">
                    <template slot-scope="scope">
                        <span>{{ scope.row.loginAffiliation }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="客户端系统"
                        width="150">
                    <template slot-scope="scope">
                        <span>{{ scope.row.loginSystem }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="运营商信息"
                        width="100">
                    <template slot-scope="scope">
                        <span>{{ scope.row.loginPlace }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="浏览器版本"
                        width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.loginBrowser }}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true"
                        label="账号所属"
                        width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.realName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="登录状态" width="80">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.loginStatus==1">成功</el-tag>
                        <el-tag type="danger" v-else>失败</el-tag>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true"
                        label="登录地址"
                        width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.loginAddress }}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true"
                        label="登录时间">
                    <template slot-scope="scope">
                        <span>{{scope.row.loginTime| dateFormat('YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-button @click="deleteLoginLogByLoginIds" type="danger" style="margin-top: 8px;float: left;" :disabled="this.multipleSelection.length==0"><i class="el-icon-delete">批量删除</i></el-button>
            <div style="display: flex;justify-content: flex-end;margin-top: 8px;">
                <el-pagination
                        background
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"SystemLoginLog",
    data(){
        return{
            loading:false,
            SystemLogList:[],
            SystemLogPage:{
                endTime: "",
                loginAddress: "",
                loginName: "",
                realName:"",
                loginStatus: 0,
                pageNum: 0,
                pageSize: 0,
                startTime: ""
            },
            total: 0,
            multipleSelection:[],
            loginStatus:[{
                value: 0,
                label: '请选择'
                },{
                value: 1,
                label: '成功'
                },{
                value: 2,
                label: '失败'
            }],
        }
    },
    mounted(){
        this.initSystemLogListQuery();
    },
    methods:{
        // 初始化角色列表
        initSystemLogListQuery(){
            this.loading = true;
            this.postRequest("/log/LoginLog/query/LoginLogPageList",this.SystemLogPage).then(resp => {
                this.loading = false;
                if (resp) {
                    this.SystemLogList = resp.data.list;
                    this.total = resp.data.total;
                }
            });
        },
        // 重置查询条件
        resetCondition(){
            this.SystemLogPage.startTime = '';
            this.SystemLogPage.endTime = '';
            this.SystemLogPage.loginAddress = '';
            this.SystemLogPage.loginStatus = 0;
            this.SystemLogPage.loginName = '';
            this.initSystemLogListQuery();
        },
        SystemLog_input(){
          this.resetCondition();
        },
        // 批量删除
        deleteLoginLogByLoginIds(){
            this.$confirm('此操作将永久删除【'+this.multipleSelection.length+'】条记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let loginIds = '?';
                this.multipleSelection.forEach(item=>{
                loginIds += 'loginIds='+item.loginId+'&';
            })
            this.deleteRequest("/log/LoginLog/delete/LoginLogByLoginIds"+ loginIds).then(resp=>{
            if (resp){
                this.initSystemLogListQuery();
            }
            })
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消删除'
                });
            });
        },
        handleSelectionChange(val){
            this.multipleSelection = val;
        },
        // 分页
        sizeChange(currentSize) {
            this.SystemLogPage.pageSize = currentSize;
            this.initSystemLogListQuery();
        },
        currentChange(currentPage) {
            this.SystemLogPage.pageNum = currentPage;
            this.initSystemLogListQuery();
        }
    }
}
</script>

<style>

</style>
